<template>
	<view class="u-page ac-list-page">
		<!-- tab页面 列表查询条件  -->
		<view class="navs flex">
		    <view :class="nav==1?'nav-item cur-nav flex1':'nav-item  flex1'" @click="changeNav(1)">
			   <div>二手出售</div>	
			   <div>{{ arr1.length }}</div>	
		    </view>	
			<view :class="nav==2?'nav-item cur-nav flex1':'nav-item  flex1'" @click="changeNav(2)">
			   <div>二手出租</div>	
			   <div>{{ arr2.length }}</div>	
			</view>	
			<view :class="nav==3?'nav-item cur-nav flex1':'nav-item  flex1'" @click="changeNav(3)">
			   <div>新房出售</div>	
			   <div>{{ arr3.length }}</div>	
			</view>	
		</view>
		<view class="list" >
			<view class="item line" @click="choose(item)" v-for="(item,index) in list" :key="index">
				<div class="item-img" :style="getItemImg(item)"></div>
				<div class="infos flex1">
					<div class="name"> {{ item.propertyName }}</div>				
					<div class="attrs cc"> 1116m | 一房一厅 | 山水兰亭 </div>				
					<div class="tip flex">  <div class="price"> 119万</div> 111元/m  </div>				
				</div>
				<div class="icon">
					 
				</div>
			</view>
		</view>
		
		
		  
		
		 
		
		
	</view>
</template>


<script>
	/*
	https://uniapp.dcloud.io/component/scroll-view.html
	https://www.cnblogs.com/mrcui/p/15822821.html
	*/
	export default {
		data() {
			return {
				 nav:1,
				 arr1:[],arr2:[],arr3:[],
				 list:[],
			}
		},
		onLoad() {
			console.log("ONLOAD () ");
		},
		created() {
		  this.load([])	
		},
		methods: {
			getItemImg(e){
				console.log("数据",e);
				var url = this.mainImg(parseInt(e.propertyType),e.ztPicture)
				console.log("数据",url);
				var background = `url(${url}) center center / 100% 100%`; 
				return { background } 
			},
			changeNav(nav) {
				this.nav = nav
				if(nav == 1) this.list = this.arr1;
				if(nav == 2) this.list = this.arr2;
				if(nav == 3) this.list = this.arr3;
			},
			async load(arr){// 不做分页,一次查完 propertyCondition物业情况（0一手 1二手） propertyStatus 状态（0在租 1已租 2在售 3已售）
			    // 二手出售 arr1 二手出租 arr2 新房出售arr3     propertyCondition 0 propertyStatus 2
			   	this.loadding = true;
				var { rows }  = await this.ajax('/wx/property/listByAuth',{})
				var arr1 = [], arr2 = [], arr3 = [];
				rows.map(e=>{
					if(e.propertyCondition == 0){
						if(/2|3/.test(e.propertyStatus)) { arr3.push(e) } //已售 再售 也可以看
					}else{
						if(/2|3/.test(e.propertyStatus)) { arr1.push(e) }
						if(/0|1/.test(e.propertyStatus)) { arr2.push(e) }
					}
				})  
				this.arr1 = arr1;
				this.arr2 = arr2;
				this.arr3 = arr3;
				this.list = this.arr1;
				this.loadding = false;
			}, 
		   choose(item){
			console.log(item,"当前选择");   
			uni.setStorageSync("id", 13||item.propertyId)
			uni.setStorageSync("mode", item.propertyStatus>1?1:2)
			uni.setStorageSync("propertyName", item.propertyName)
			
			this.$store.dispatch("asyncPublishInfo", { propertyType: item.propertyType,mode: item.propertyStatus>1?1:2, });
						
			this.$store.dispatch("ztLocation", item.ztLocation);
			this.$store.dispatch("ztSpace", item.ztSpace);
			this.$store.dispatch("ztPrice", item.ztPrice);
			this.$store.dispatch("ztPicture", item.ztPicture);
			
			this.toPage('/pages/publish/index')
		  },
		}
	}
</script>

<style lang="scss">
	.ac-list-page{
		.nav-item{
			text-align: center;
			color: #9C9C9C;
			font-weight: 600;
			margin-top: 20px;
			padding: 10px 0 4px 0;
		}
		.cur-nav{
			background-color: #FBD100;
			color: #000;
		}
		.item{
			padding: 10px;
			border-bottom: 1px solid #ccc;
			.item-img{
				width: 100px;
				height: 70px;
			}
			.infos{
			  padding-left: 10px;  
			  .name{
				  font-size: 18px;
				  font-weight: 600;
			  }
			  .price{
				 font-size: 18px;
				 font-weight: 600; 
				 margin-right: 10px;
			  }
			}
			.number{
			   font-size: 14px;
			   font-weight: 600;
				color: #ccc;
			}
			.plus{
				color: #ECD72D;
			}
		} 
	}
  
</style>

 